<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动手实践3</title>
</head>
<body>
  <select id="province">
      <option value="-1">请选择</option>
  </select>  
  <select id="city"></select>
  <select id="country"></select>
  <script>
  var provinceArr=['上海','江苏','河北'];
  var cityArr=[ ['上海市'],
  ['苏州市','南京市','扬州市'],
  ['石家庄','秦皇岛','张家口']
  ];
  var countryArr=[
      [
          ['黄浦区','静安区','长宁区','浦东区']
      ],[
          ['虎丘区','吴中区','相城区','姑苏区','吴江区'],
          ['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
          ['邗江区','广陵区','江都区']
      ],[
          ['长安区','桥西区','新华区','井陉矿区'],
          ['海港区','山海关区','北戴海区','抚宁区'],
          ['桥东区','桥西区','宜化区','下花园区']
      ]
  ];
  function createOption(obj,data){
      for (var i in data){
          var op = new Option(data[i],i);
          obj.options.add(op);
      }
  }
  var province=document.getElementById('province');
  createOption(province,provinceArr);
  var city=document.getElementById('city');
  province.onchange=function(){
      city.options.length = 0;
      createOption(city,cityArr[province.value]);
  };
  var country=document.getElementById('country');
  city.onchange = function(){
      country.options.length = 0;
      createOption(country,countryArr[province.value][city.value]);
  };
  province.onchange=function(){
      city.options.length = 0;
      createOption(city,cityArr[province.value]);
      if (province.value>=0){
          city.onchange();
      }
      else{
          country.options.length = 0;
      }
      };
  </script>
    <p><a href="第三章.html">返回上一级</a></p>
</body>
</html>